window.onload = function() {

    // tailoringImg



    $('#addSy').click(function()  {
        $('#showImgContainer').find('p').remove();
        var value  =  '长宁区档案馆';


        var spanWidth = Number(value.length) * 20;
        var span  =  document.createElement('p');
        span.style.position  =  'absolute';
        span.style.fontSize  =  '38px';
        span.style.width =  spanWidth;



        var htmlHeight  =  $('#finalImg').height();
        var htmlWidth  =  $('#finalImg').width();
        var line  =  Math.ceil(htmlHeight*0.6  / (spanWidth + 20)) ;
        var lie = Math.ceil(htmlWidth  / (spanWidth * 1.8));


        for  (var  i  =  0;  i  <  lie;  i++)  {
            for  (var  j  =  0;  j  <  line;  j++)  {
                var  spanTemp  =  document.createElement('p');
                spanTemp .style.position  =  'absolute';
                spanTemp .style.fontSize  =  '36px';
                spanTemp .style.left  =  i  * (spanWidth * 1.8) +  'px';
                spanTemp .style.top  =  j  * (spanWidth + 20) +  'px';
                spanTemp .style.transform  =  'rotate(-45deg)';
                spanTemp .style.color  =  'rgba(255,255,255,0.45)';
                spanTemp .innerText  =  value;
                $('#showImgContainer').append(spanTemp );
            }
        }
    });

    //裁剪后的处理
    $("#sureCut").on("click", function () {

        if ($("#tailoringImg").attr("src") == null) {
            return false;
        } else {
            var cas = $('#tailoringImg').cropper('getCroppedCanvas'); //获取被裁剪后的canvas
            var base64url = cas.toDataURL('image/jpeg'); //转换为base64地址形式

            $("#finalImg").attr("src", base64url);//显示为图片的形式
            let el = $("#finalImg")[0];
            let img1 = new Image();
            img1.src = base64url;
            img1.onload= () =>{
                // sessionStorage.setItem('width1',img1.width);
                // sessionStorage.setItem('height1',img1.height);
                $('#showImgContainer').find('p').remove();
                var value  =  '长宁区城建档案室';


                var spanWidth = Number(value.length) * 30;
                var span  =  document.createElement('p');
                span.style.position  =  'absolute';
                span.style.fontSize  =  '36px';
                span.style.width =  spanWidth;



                var htmlHeight  =  img1.height;
                var htmlWidth  =  img1.width;
                console.log(htmlWidth,htmlHeight);
                if(spanWidth > htmlWidth){
                    let len = Math.floor(htmlWidth / 20);
                    let newStr = value.substr(0,len+1);
                    value = newStr;
                }
                // setTimeout(()=>{
                //     let htmlHeight = sessionStorage.getItem('width1');
                //     let htmlWidth = sessionStorage.getItem('height1');
                //
                // },10);

                var line  =  Math.floor(htmlHeight*0.9  / (spanWidth + 10));
                var lie = Math.floor(htmlWidth  / (spanWidth * 1.4)) < 1 ? 1 : Math.floor(htmlWidth  / (spanWidth * 1.4)) ;
                var liftSize=(htmlWidth-( lie  * (spanWidth * 1.4)))/2;
                //图片宽度 小于  水印的长度
                //显示部分水印

                var  spanTemp  =  document.createElement('p');
                spanTemp .style.position  =  'absolute';
                spanTemp .style.fontSize  =  '36px';
                spanTemp .style.left  =  htmlWidth > 700 ? 300 + 'px':(htmlWidth - spanWidth)/2+'px';
                spanTemp .style.top  =  htmlHeight > 450 ? 200 + 'px' : (htmlHeight - spanWidth)/2+'px';
                // spanTemp .style.transform  =  'rotate(-45deg)';
                spanTemp .style.overflow = 'hidden';
                spanTemp .style.color  =  'rgba(255,255,255,0.45)';
                spanTemp .innerText  =  value;
                $('#showImgContainer').append(spanTemp );

                // for  (var  i  =  0;  i  <  lie;  i++)  {
                //
                //     for  (var  j  =  0;  j  <  line -1;  j++)  {
                //         var  spanTemp  =  document.createElement('p');
                //         spanTemp .style.position  =  'absolute';
                //         spanTemp .style.fontSize  =  '36px';
                //         spanTemp .style.left  =  liftSize+(i  * (spanWidth * 1.4)) +  'px';
                //         spanTemp .style.top  =  j  * (spanWidth + 20) +  'px';
                //         // spanTemp .style.transform  =  'rotate(-45deg)';
                //         spanTemp .style.overflow = 'hidden';
                //         spanTemp .style.color  =  'rgba(255,255,255,0.45)';
                //         spanTemp .innerText  =  value;
                //         $('#showImgContainer').append(spanTemp );
                //     }
                // }
                var iframe = document.getElementById('print-iframe');
                let id = 'showImgContainer';
                if (iframe) {
                    document.body.removeChild(iframe);
                }else{
                    var el = document.getElementById(id);
                    iframe = document.createElement('IFRAME');
                    var doc = null;
                    iframe.setAttribute('id', 'print-iframe');
                    let style = 'position:absolute;width:0px;height:0px;left:-200px;top:-500px;margin:0;';
                    iframe.setAttribute('style', style);

                    document.body.appendChild(iframe);
                    doc = iframe.contentWindow.document;

                    doc.write('<div>' + el.innerHTML + '</div>');
                    doc.close();
                    iframe.contentWindow.focus();
                }

                // return
                setTimeout(() => {
                    iframe.contentWindow.print();
                }, 500);
                setTimeout(() => {
                    document.body.removeChild(iframe);
                }, 1000);
                $('#showImgContainer').hide();
            };

            // $('#finalImg').show();
            // $('#noImage').hide();
            // $('#showImgContainer').css('height', '80%').css('overflow', 'auto')
            //关闭裁剪框
            // $('.tailoring-content-two').hide()
            // $('#firstBtns').hide()
            // $('#operationBtns').show()
        }
        // $("#dayin").trigger("click");
    });

    $('#dayin').click(function() {
        $('#showImgContainer').find('p').remove();
        var value  =  '长宁区城建档案室';


        var spanWidth = Number(value.length) * 20;
        var span  =  document.createElement('p');
        span.style.position  =  'absolute';
        span.style.fontSize  =  '36px';
        span.style.width =  spanWidth;



        var htmlHeight  =  $('#finalImg').height();
        var htmlWidth  =  $('#finalImg').width();
        // setTimeout(()=>{
        //     let htmlHeight = sessionStorage.getItem('width1');
        //     let htmlWidth = sessionStorage.getItem('height1');
        //
        // },10);

        var line  =  Math.ceil(htmlHeight*0.6  / (spanWidth + 20)) * 2.5;
        var lie = Math.ceil(htmlWidth  / (spanWidth * 1.8)) * 2.5;


        for  (var  i  =  0;  i  <  lie;  i++)  {
            for  (var  j  =  0;  j  <  line;  j++)  {
                var  spanTemp  =  document.createElement('p');
                spanTemp .style.position  =  'absolute';
                spanTemp .style.fontSize  =  '36px';
                spanTemp .style.left  =  i  * (spanWidth * 1.8) +  'px';
                spanTemp .style.top  =  j  * (spanWidth + 20) +  'px';
                spanTemp .style.transform  =  'rotate(-45deg)';
                spanTemp .style.color  =  'rgba(255,255,255,0.45)';
                spanTemp .innerText  =  value;
                $('#showImgContainer').append(spanTemp );
            }
        }
        var iframe = document.getElementById('print-iframe');
        let id = 'showImgContainer';
        if (iframe) {
            document.body.removeChild(iframe);
        }else{
            var el = document.getElementById(id);
            iframe = document.createElement('IFRAME');
            var doc = null;
            iframe.setAttribute('id', 'print-iframe');
            let style = 'position:absolute;width:0px;height:0px;left:-200px;top:-500px;margin:0;';
            iframe.setAttribute('style', style);

            document.body.appendChild(iframe);
            doc = iframe.contentWindow.document;

            doc.write('<div>' + el.innerHTML + '</div>');
            doc.close();
            iframe.contentWindow.focus();
        }

            // return
        setTimeout(() => {
            iframe.contentWindow.print();
        }, 500);
        setTimeout(() => {
            document.body.removeChild(iframe);
        }, 1000);
        $('#showImgContainer').hide();
    });
    $(".cropper-rotate-btn").on("click", function() {
        $('#tailoringImg').cropper("rotate", 90);
    });
    //复位
    $(".cropper-reset-btn").on("click", function() {
        $('#tailoringImg').cropper("reset");
        $('#tailoringImg').cropper('clear');
        $('#finalImg').attr("src",  $('#tailoringImg').attr('src'));//设置#bigimg元素的src属性
    });
    $('#qx').on('click', function() {
        $('#tailoringImg').cropper("reset");
        $('#tailoringImg').cropper('clear');
    });
    //大
    $(".cropper-big-btn").on("click", function() {
        $('#tailoringImg').cropper("zoom", 0.1);
    });
    //小
    $(".cropper-small-btn").on("click", function() {
        $('#tailoringImg').cropper("zoom", -0.1);
    });
    //开始
    $(".cropper-jianqie-btn").on("click", function() {
        $('#tailoringImg').cropper('crop');
    });
    //换向
    var flagX = true;
    $(".cropper-scaleX-btn").on("click", function() {
        if (flagX) {
            $('#tailoringImg').cropper("scaleX", -1);
            flagX = false;
        } else {
            $('#tailoringImg').cropper("scaleX", 1);
            flagX = true;
        }
        // flagX != flagX;
    });

}